<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <to-head :title="title" />
        </div>

        <div class="by-content">
          <a-row :gutter="15">
            <a-col span="6">
              <div class="by-left bg-color-black">
                <div class="title">今日保养计划</div>
                <div style="width:90px; height:90px;margin:0 auto">
                  <by-echarts :data="sumdaynothandlednum"></by-echarts>
                </div>
                <!-- <p>
                  <span class="by-num">{{ sumdaynothandlednum }}</span>
                </p> -->
              </div>
              <div class="by-left bg-color-black">
                <div class="title">今日已保养</div>
                <p class="by-num2">
                  <span>{{ sumdayhandlednum }}</span>
                </p>
                <dv-decoration-6
                  :color="['#31d5cf', '#00bb79']"
                  style="width:150px;height:30px;margin:0 auto"
                />
              </div>
              <div class="by-left bg-color-black">
                <div class="title">当月保养计划</div>
                <!-- <div class="by-left-con"> -->
                <dv-decoration-7
                  style="width:150px;height:30px; margin:20px auto"
                >
                  <span class="by-num3">{{
                    summonthnothandlednum
                  }}</span></dv-decoration-7
                >
                <!-- </div> -->

                <!-- <dv-capsule-chart
                  :config="config"
                  style="width:100%;height:50px"
                /> -->
              </div>
              <div class="by-left bg-color-black">
                <div class="title">当月已保养</div>
                <dv-decoration-9
                  dur="8"
                  style="width:65px;height:65px; margin:0 auto"
                  ><span class="by-num">{{
                    summonthhandlednum
                  }}</span></dv-decoration-9
                >
              </div>
            </a-col>
            <a-col span="18">
              <div class="by-right bg-color-black">
                <right-chart-1 :month="monthdata"></right-chart-1>
              </div>
              <div class="by-right bg-color-black">
                <right-chart-2 :day="daydata"></right-chart-2>
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import ToHead from './components/ToHead.vue'
import RightChart1 from './components/by/RightChart1.vue'
import RightChart2 from './components/by/RightChart2.vue'
import { queryBYCharts } from './api/dataApi'
import ByEcharts from './components/by/ByEcharts.vue'

export default {
  name: 'App',
  components: {
    ToHead,
    // LeftChart1,
    RightChart1,
    RightChart2,
    ByEcharts,
    // LeftChart4,
  },
  data() {
    return {
      indexInv: 0,
      title: '车间保养大屏',
      config: {},

      lpRate: 0,
      // wcList: [],
      reprotOneData: {},
      reportTwoData: [],
      // reportThreeData: {},
      dateList: [],
      countyCheckData: [],

      reportFourDataList: [],
      reprotEqNum: {
        runningNum: 0,
        normalNum: 0,
        disabledNum: 0,
      },
      summonthhandlednum: '', //当月已保养
      sumdaynothandlednum: '', //当日保养计划
      sumdayhandlednum: '', //当日已保养
      summonthnothandlednum: '', //当月保养计划
      daydata: [], //今日保养计划
      monthdata: [], //当月保养计划数
    }
  },

  watch: {},

  created() {
    this.getData()
  },
  mounted() {
    setInterval(() => {
      this.getData()
    }, 60000)
  },
  computed: {},
  methods: {
    getData() {
      const that = this
      const params = {
        _params: {},
        _condition: {},
        pageSize: 10,
        pageIndex: 1,
        sortField: '',
        sortOrder: '',
      }
      queryBYCharts(params)
        .then((res) => {
          if (String(res.code) === '0') {
            that.daydata = res.data.daydata
            that.monthdata = res.data.monthdata
            that.summonthhandlednum = res.data.summonthhandlednum //当月已保养
            that.sumdaynothandlednum = res.data.sumdaynothandlednum //当日保养
            that.sumdayhandlednum = res.data.sumdayhandlednum //当日已保养
            that.summonthnothandlednum = res.data.summonthnothandlednum //当月保养计划
            this.config = {
              data: [
                {
                  name: '',
                  value: res.data.summonthnothandlednum,
                },
              ],
            }
          } else {
            that.$message.error(
              res.msg ? res.msg : '数据请求失败，请联系管理员！'
            )
          }
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员！')
        })
    },
  },
}
</script>

<style lang="less">
.appp {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  font-size: 14px;
  padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.by-content {
  padding: 15px;
}

.border11 path {
  stroke-width: 1 !important;
}
.by-left {
  margin-bottom: 15px;
  border-radius: 8px;
  padding: 8px 12px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid rgba(79, 203, 255, 0.1);
  height: calc((90vh - 70px) / 4);
  .title {
    text-align: left;
    color: #1ab6e9;
    font-size: 15px;
  }
}
.by-right {
  margin-bottom: 15px;
  border-radius: 8px;
  padding: 10px 10px;
  box-sizing: border-box;
  border: 1px solid rgba(79, 203, 255, 0.1);
}
.by-left-con {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.by-num {
  text-align: center;
  font-size: 19px;
  color: #fff;
}
.by-num2 {
  text-align: center;
  font-size: 20px;
  margin-top: 5px;
  color: #fff;
}
.by-num3 {
  width: 100px;
  font-size: 20px;
  color: #fff;
}
</style>
